<!DOCTYPE html>
<html lang="en">
{% include "./_pub_header.html" %}
<script type="text/javascript" charset="utf-8">
//http://blog.163.com/songyalong1117@126/blog/static/17139189720145232259111/
//http://blog.csdn.net/mickey_miki/article/details/8240477
    $(document).ready(function() {
        $('#example').dataTable({
/*            "bLengthChange": false,
            "bPaginate": false,*/
            "bStateSave": true,
            "bScrollInfinite": true,
            "bScrollCollapse": true,
            "sScrollY": "auto",
            "sScrollX": "120%",
        });
    } );
</script>
<body>
{% include "./_pub_body.html" %}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="container">
  <h2>主机列表</h2>
<!--  <p>Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger.</p> -->
  <table id="example" class="table table-bordered table-responsive" data-pagination="true" data-page-list="[5,10,20,50]">
    <thead>
      <tr>
        <th>HostName</th>
        <th>Domain</th>
        <th>PriIP</th>
        <th>PubIP</th>
        <th>InterfacePri</th>
        <th>InterfacePub</th>
        <th>CPU</th>
        <th>DISK</th>
        <th>MEM</th>
        <th>OS</th>
        <th>Role</th>
        <th>Project</th>
        <th>Zone</th>
        <th>CreateTime</th>
      </tr>
    </thead>
    <tbody>
      {% for post in posts %}
      <tr class="success">        
        <td><a href="#" id="{{ post.id }}hostname" data-type="text" data-fld="HostName" data-pk="{{ post.id }}" data-url="/update/" data-title="Enter hostname">{{ post.HostName }}</a></td>
        <td>{{ post.Domain }}</td>
        <td>{{ post.PriIP }}</td>
        <td>{{ post.PubIP }}</td>
        <td>{{ post.InterfacePri }}</td>
        <td>{{ post.InterfacePub }}</td>
        <td>{{ post.CPU }}</td>
        <td>{{ post.DISK }}</td>
        <td>{{ post.MEM }}</td>
        <td>{{ post.OS }}</td>
        <td>{{ post.Role }}</td>
        <td>{{ post.Project }}</td>
        <td>{{ post.Zone }}</td>
        <td>{{ post.CreateTime }}</td>
      </tr>
      <script type="text/javascript">
        $.fn.editable.defaults.mode = 'inline';
        $(document).ready(function() {
            $('#{{ post.id }}hostname').editable();
        });
        </script>
      {% endfor %}
    </tbody>
  </table>
</div>
<!--<p>
  {# posts.paginator.page_range 这个函数返回包含一个所有页码数的 range 对象 #}
  {# 即 range(1, posts.paginator.num_pages + 1) #}
  <style>.divcss5-right{float:left;width:250px;height:50px;border:1px solid #F00} </style>
  <ul class="pagination">
  {% if posts.has_previous %}
    <li><a href="?page={{ posts.previous_page_number }}">&laquo;</a></li>
  {% endif %}
  {% for page_number in posts.paginator.page_range %}
    {% ifequal page_number  posts.number %}
      <li class="active"><a>{{ page_number }}</a></li>
    {% else %}
      <li><a href="?page={{ page_number }}">{{ page_number }}</a></li>
    {% endifequal %}
  {% endfor %}
  {% if posts.has_next %}
    <li><a href="?page={{ posts.next_page_number }}">&raquo;</a></li>
  {% endif %}
  </ul>
</p>-->
</div>
</body>
</html>
